@path_to_imgs:"../imgs/";
@square_size:30px;
@board_size:7*@square_size+(10px*7);

.transition(@pProp, @pDuration)
{
	-moz-transition:@pProp @pDuration;
	transition:@pProp @pDuration;
}


*{margin:0;padding:0;font-family:Helvetica, Arial, sans-serif;outline: none;}

html, body{width:100%;height:100%;}

body{
	background: #f5f5f5;overflow: hidden;
	header
	{
		position:relative;height:30px;width:100%;text-align: center;font-size:24px;padding:10px;background:#ffffff;margin-bottom:15px;box-shadow: 0 0 4px rgba(0, 0, 0, .4);

		a.restart
		{
			display:block;position:absolute;width:32px;height:32px;background:url("@{path_to_imgs}icon_restart.png") no-repeat center center;background-size:32px 32px;right:32px;top:50%;margin-top:-16px;
		}

		span.count
		{
			display:block;position:absolute;font-style:italic;color:#666666;margin-top:-10px;top:50%;font-size:16px;
			span{font-style: normal;color:#000000;font-weight: bold;}
		}
	}
	.content{position:absolute;top:50%;left:50%;margin-top:-(@board_size/2);margin-left:-(@board_size/2);}
	.board
	{
		width:@board_size;height:@board_size;margin:0 auto;
		div.square
		{
			width:@square_size;height:@square_size;float:left;margin:5px;
			&.available
			{
				width:@square_size;height:@square_size;float:left;margin:5px;
				background:#cccccc;border-radius:50%;box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);

				.piece
				{
					.transition(all, .5s);
					width:32px;height:32px;background: #3e3e3e;border-radius:100%;margin:-1px 0 0 -1px;
					&.current
					{
						width:34px;height:34px;margin:-3px 0 0 -3px;background: #5bc5ff;border:1px solid #3e3e3e;
					}
				}
			}
		}
		div.crlf{width:0;height:0;clear:both;margin:0;}
	}
}